<template>
    <div class="common-box" v-if="boxIsShow">
        <div class="common-content-box">
            <div class="content-table-box">
                <div class="content_table_title_box">
                    <img src="@/assets/icon-data.png" class="content_table_title_icon">
                    <div class="content_table_title">产品销售情况</div>
                </div>
                <div class="table_search_box">
                    <el-form :inline="true" :model="searchForm" class="demo-form-inline">
                        <el-form-item label="产品名称" style="margin-bottom: 0;">
                            <el-input v-model="searchForm.name" placeholder="请输入产品名称" size="small "></el-input>
                        </el-form-item>
                        <el-form-item label="选择时间范围" style="margin-bottom: 0;">
                            <el-date-picker
                                size="small "
                                v-model="searchForm.orderTime"
                                type="daterange"
                                range-separator="至"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期"
                                value-format="yyyy-MM-dd"
                                @change="handleDateChange">
                            </el-date-picker>
                        </el-form-item>
                        <el-form-item style="margin-bottom: 0;">
                            <el-button type="primary" @click="search" size="small ">查询</el-button>
                        </el-form-item>
                    </el-form>
                </div>
                <div class="table_box">
                    <el-table
                        :data="tableData"
                        style="width: 100%;"
                        height="92%">
                        <el-table-column
                        fixed
                        prop="spuName"
                        label="产品名称"
                        width="250">
                        </el-table-column>
                        <el-table-column
                        prop="total_price"
                        label="销售额"
                        width="200">
                        </el-table-column>
                        <el-table-column
                        prop="total_cost"
                        label="成本"
                        width="200">
                        </el-table-column>
                        <el-table-column
                        prop="profit"
                        label="利润"
                        width="200">
                        </el-table-column>
                        <el-table-column
                        label="利润率"
                        width="200">
                        <template slot-scope="scope">
                            <span>{{ scope.row.profitMargin }}%</span>
                        </template>
                        </el-table-column>
                        <el-table-column
                        prop="total_num"
                        label="销量"
                        width="200">
                        </el-table-column>
                        <!-- <el-table-column
                        label="操作"
                        width="200">
                        <template slot-scope="scope">
                            <el-button @click="handleClick(scope.row)" type="text" size="medium ">查看详情</el-button>
                        </template>
                        </el-table-column> -->
                    </el-table>
                    <pagination
                    :total="total"
                    :limit="pageSize"
                    :page="pageNumber"
                    @pageChange="pageChange"
                    ></pagination>
                </div>
            </div>
        </div>
        <show-addressBox
          ref="showAddressBox"
        ></show-addressBox>
    </div>
</template>
<script>
import Pagination from "@/components/pagination.vue";
import showAddressBox from "@/components/showAddressBox.vue";
export default {
    components: {
    Pagination,
    showAddressBox
  },
  data() {
    return {
        total: 0,
        pageSize: 30,
        pageNumber: 1,
        tableData: [],
        boxIsShow:false,
        searchForm:{
            name:'',
            orderTime:'',
            startTime:'',
            endTime:''
        },
        tableData: []
    };
  },
  methods: {
    __init() {
      this.getData();
    },
    getData(){
      var url="manager/getGoodsSpuSalePageByTime";
      var params={
        pageSize: this.pageSize,
        pageNum: this.pageNumber,
        spuName:this.searchForm.name,
        startTime:this.searchForm.startTime,
        endTime:this.searchForm.endTime
      }
      this.$post(url, params).then((res) => {
        console.log(res)
        if (res.code === 0) {
            this.total = res.data.total;
            var oldList=res.data.list;
            var updateList=oldList.map(row => ({
                ...row,
                profit: (row.total_price - row.total_cost).toFixed(2),
                profitMargin : row.total_cost==0?'0':((row.total_price - row.total_cost) / row.total_cost * 100).toFixed(2)
            }));
            this.tableData=updateList;
        } else {
          this.$message.error(res.msg)
        }
      });
    },
    pageChange(e) {
      this.pageNumber = e.page;
      this.getData();
    },
    handleDateChange(value) {
        console.log(value)
      if (value && value.length === 2) {
        this.searchForm.startTime = value[0];
        this.searchForm.endTime = value[1]; 
      } else {
        this.searchForm.startTime = '';
        this.searchForm.endTime = '';
      }
    },
    search(){
      this.pageNumber=1;
      this.getData();
    },
    lookAddressList(uuid){
      if (this.$refs.showAddressBox) {
        // 显示当前详情
        this.$refs.showAddressBox.tkIsShow = true;
        this.$refs.showAddressBox.title = "收货地址列表";
        this.$refs.showAddressBox.__init(uuid);
      }
    }
  }
}
</script>
<style scoped lang="scss">
  .common-box{
    background-color: #f9f9fb;
    height: 100%;
  }
  .common-content-box{
    height: 95%;
    margin-top: 2%;
    width: 96%;
    display: inline-block;
  }
  .content-table-box{
    background-color: #fff;
    width: 100%;
    height: 100%;
    border-radius: 5px;
    box-shadow: 0 0 5px 1px rgba(83, 83, 83, 0.1);
  }
  .content_table_title_box{
    position: relative;
    height: 30px;
    margin-top: 10px;
    width: 100%;
    display: inline-block;
  }
  .content_table_title_icon{
    position: absolute;
    left: 15px;
    height: 18px;
    top: 6px;
  }
  .content_table_title{
    position: absolute;
    line-height: 34px;
    height: 100%;
    font-size: 15px;
    color: #42484e;
    left: 40px;
  }
  .table_search_box{
    text-align: left;
    margin-top: 10px;
    margin-left: 2%;
  }
  .table_box{
    height: calc(100% - 100px);
    margin-top: 10px;
    width: 96%;
    margin-left: 2%;
  }
  ::v-deep .el-select>.el-input{
    width: 120px;
  }
</style>